<template>
    <!-- 商品卡片 -->
    <div class="cardContainer">
        <router-link 
            :to="`/${common.extConfig.storeId}/pages/product/index/${item.Id}`" 
            v-for="item in productInfo.list" 
            :key="item.Id"
            class="cardItem"
        >
        <van-card
            :tag="tag"
            :title="item.Name"
            :thumb="item.ImgUrl | joinPicUrl"
            :price="item.SalePrice"
            :origin-price="oldPrice"  
        >
                <!-- <div slot="tags">
                    <van-tag plain round type="danger">{{tags}}</van-tag>
                </div> -->
                <div slot="bottom" class="buy">
                    <!-- BUY -->
                    <i v-if="productInfo.style == 1 ? true : false" aria-label="图标: plus-circle" class="anticon anticon-plus-circle" style="font-size: 23px;"><svg viewBox="64 64 896 896" class="" data-icon="plus-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path fill="#F5222D" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path fill="#fff1f0" d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zm192 396c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z"></path><path fill="#F5222D" d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path></svg></i>
                    <img v-if="productInfo.style == 2 ? true : false" class="buyBtn" src="https://insidexkd.oss-cn-shanghai.aliyuncs.com/xkdnewyun/systemfile/wxashop/icon/shopcart-icon1.png">
                    <img v-if="productInfo.style == 3 ? true : false" class="buyBtn" src="https://insidexkd.oss-cn-shanghai.aliyuncs.com/xkdnewyun/systemfile/wxashop/icon/shopcart-icon2.png">
                    <MyButton
                        v-if="productInfo.style == 4 ? true : false"
                        btnMsg="BUY"
                        type="danger"
                        size="mini"
                        class="buyBtn4"
                    ></MyButton>
                </div>
        </van-card>
        </router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    props: ['productInfo', 'title', 'thumb', 'price', 'oldPrice', 'tag', 'tags'],
    computed: {
        ...mapState(['common'])
    }
}
</script>

<style lang="stylus">
    // 商品卡片
    .cardContainer
        padding 0.2rem
        .cardItem
            display block
            &:not(:first-child)
                margin-top 10px
        .van-card
            padding 0
            background #fff
            img 
                object-fit fill!important
            // 文字中心
            .van-card__content
                display flex
                flex-direction column
                justify-content space-between
                // 标题
                .van-card__title
                    margin 5px 5px -5px 5px
                    font-size 14px
                // 标签
                .van-tag
                    transform scale(0.8)
                // 底部
                .van-card__bottom
                    display flex
                    justify-content space-between
                    // 价钱
                    .van-card__price
                        margin-left 5px
                        font-size 16px
                    // 购买
                    .buy
                        display flex
                        align-items center
                        // padding 0 0.05rem
                        border-radius 0.05rem
                        // background #F5222D
                        color #fff
                        // font-size 0.12rem
                        font-size 23px
                        .buyBtn
                            width 0.48rem
                            height 0.48rem
                        .buyBtn4
                            margin 0
                            border-radius 0.08rem
                            .van-button
                                min-width 42px
                                height 24px

</style>
